<template>
  <div class="full-wrap"
       :style="{
      width: currentFrameLocked ? frameStyle.width : '',
      height: currentFrameLocked ?frameStyle.height : ''
    }"
  >
    <div class="mask" v-if="!currentFrameLocked" @click="handleCloseFrame"></div>
    <div class="main-wrap" :class="currentFrameState == 'max' ? 'full-border' :'min-border'"
         :style="{
      width: frameStyle.width,
      height: frameStyle.height,
      top: 0,
      left: 0
    }"
         @click.self="handleClickOutside"
         v-loading="loading"
    >
      <div class="header">
        <div class="logo-wrap">
          <el-image :src="logoIcon"/>
          <span class="font-bold">网页版</span>
        </div>
        <div>
          <el-image class="act-btn" v-show="currentFrameState == 'mini'" :src="MaxIcon" @click="handleMaxFrame"/>
          <el-image class="act-btn" v-show="currentFrameState != 'mini'" :src="NormalIcon" @click="handleMaxFrame"/>
<!--          <el-image class="act-btn" :src="CloseIcon" @click="handleCloseFrame"/>-->
        </div>
      </div>
      <div class="content">
        <div class="left-menu">
          <div class="base-menu">
            <div class="top cur-pointer">
              <div class="avatar" @click="handleUserCard({user:{uid: userInfos.hash,groupId: null}, event: $event})">
                <el-image :src="userInfos.avatar"/>
              </div>

              <el-tooltip
                  effect="light"
                  :content="item.label"
                  placement="right-end"
                  v-for="(item, index) in baseMenus"
                  :key="'bm'+index"
              >
                <div class="icon-image" @click="handleBaseMenuChange(item.value)">
                  <el-image v-show="currentBaseMenu == item.value" :src="item.iconSelected"/>
                  <el-image v-show="currentBaseMenu != item.value" :src="item.icon"/>
                </div>
              </el-tooltip>
            </div>
            <div class="bottom cur-pointer">
              <el-tooltip
                  content="设置"
                  effect="light"
                  placement="right-end"
              >
                <div class="icon-image" @click="handleBaseMenuChange('config')">
                  <el-image :src="ConfigIcon"/>
                </div>
              </el-tooltip>
              <el-tooltip
                  :content="onlineState ? '已连接' : '已断开'"
                  effect="light"
                  placement="right-end"
              >
                <div class="icon-image">
                  <el-image v-show="onlineState" :src="ConnectSelectedIcon"/>
                  <el-image v-show="!onlineState" :src="ConnectIcon"/>
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="user-wrap">
            <div class="search-wrap">
              <el-input
                  v-model="keywords"
                  :style="{width: currentBaseMenu == 'client' ? '100%' :'calc(100% - 40px)'}"
                  placeholder="搜索"
                  :prefix-icon="Search"
              />
              <span v-if="currentBaseMenu != 'client'" @click="handleAdd">+</span>
            </div>
            <div class="user-wrap">
              <!-- 聊天/客服列表-start-->
              <div style="height: 100%" v-show="currentBaseMenu == 'normal' || currentBaseMenu == 'client'">
                <ChatUserItem v-for="(item, index) in users"
                              :key="'ui'+index"
                              @click="selectUser(index)"
                              :detail="item"
                              :class="item.selected ? 'user-active' : ''"/>
              </div>
              <!-- 聊天/客服列表-end-->
              <!-- 好友列表-->
              <div style="height: 100%" v-show="currentBaseMenu == 'user'">
                <ChatUserFriendItem :friend-map="userFriendMap" @handle-select="handleSelectFriendUser"/>
              </div>
              <!-- 好友列表-->
            </div>
          </div>
        </div>

        <div v-loading="msgLoading" v-show="currentBaseMenu == 'normal' || currentBaseMenu == 'client'"
             class="chat-container">
          <div class="chat-head">
            <span>{{ currentUser.name }}</span>
            <el-icon class="cur-pointer" v-show="currentUser?.groupId" @click="showGroupInfo">
              <ele-MoreFilled/>
            </el-icon>
          </div>
          <div class="msg-wrap" id="chat-msg-wrap">
            <template v-if="users[currentUserIndex]?.messages && users[currentUserIndex].messages.length > 0">
              <ChatMsgItem v-for="(item,index) in users[currentUserIndex].messages"
                           :key="'cl'+index"
                           :detail="item"
                           :client="currentUser"
                           @handleUserCard="handleUserCard"
              />
            </template>
            <EmptyData v-else/>
          </div>
          <div class="send-wrap">
            <div class="option-wrap">
              <div class="option-item">
                <el-popover
                    placement="top"
                    :width="400"
                    trigger="click"
                    v-if="emojis.length > 0"
                >
                  <template #reference>
                    <span class="cur-pointer">{{ emojis[0] }}</span>
                  </template>
                  <template #default>
                  <span class="emoji-item cur-pointer" v-for="(item,index) in emojis" :key="'emj' + index"
                        @click="selectEmoji(item)">
                    {{ item }}
                  </span>
                  </template>
                </el-popover>
              </div>
              <el-image class="option-item" :src="FolderIcon"/>
              <el-image class="option-item" :src="ImageIcon"/>
            </div>
            <div class="form-wrap">
              <div class="edit-wrap" id="message-div"
                   :contenteditable="true">
                {{ message }}
              </div>
              <div class="send-btn" @click="sendMessage">发送</div>
            </div>
          </div>

          <div ref="groupDetailRef">
            <div class="group-info-wrap" v-if="groupInfoState">
              <ChatGroupDetail :groupId="currentUser.groupId" @callback="handleChatHistory"
                               @handleUserCard="handleUserCard"/>
            </div>
          </div>
        </div>

        <div v-show="currentBaseMenu == 'user' && (currentFriend?.uid != '' && currentFriend?.uid != null)"
             class="user-info-container">
          <ChatUserBaseInfo v-if="currentFriend.uid != 'newFriend'" :uid="currentFriend.uid" :key="autoKey"/>
          <ChatNewFriends v-if="currentFriend.uid == 'newFriend'" :uid="uid" :key="autoKey"/>
        </div>
        <ChatHistory ref="chatHistoryRef" :group-id="currentUser.groupId" :group-name="currentUser.name"/>

        <ChatConfig ref="chatConfigRef" v-if="showConfig" @handleClose="showConfig = !showConfig"/>
      </div>

      <!--    用户弹框卡片-->
      <div ref="chatUserCardWrapRef">
        <ChatUserCard v-if="showUserCardState" :uid="showCardUser.uid" :group-id="showCardUser.groupId"
                      :position="cardPosition"
                      @handle-close="showUserCardState = false"/>
      </div>
      <!--    用户弹框卡片-->
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  nextTick,
  onBeforeMount,
  onMounted,
  reactive,
  ref,
  toRefs,
  onBeforeUnmount
} from 'vue';
import ChatMsgItem from "/@/components/chat/ChatMsgItem.vue";
import ChatGroupDetail from "/@/components/chat/ChatGroupDetail.vue";
import FolderIcon from "/@/assets/chat/folder.svg";
import ImageIcon from "/@/assets/chat/image.svg";
import MaxIcon from "/@/assets/chat/max-icon.svg";
import NormalIcon from "/@/assets/chat/normal-icon.svg";
import CloseIcon from "/@/assets/chat/close.svg";
import LockIcon from "/@/assets/chat/lock-icon.svg";
import UnlockIcon from "/@/assets/chat/unlock-icon.svg";
import ConnectSelectedIcon from "/@/assets/chat/connect-selected-icon.svg";
import ConnectIcon from "/@/assets/chat/connect-icon.svg";
import ConfigIcon from "/@/assets/chat/config-icon.svg";
import ConfigSelectedIcon from "/@/assets/chat/config-selected-icon.svg";
import NewFriendIcon from "/@/assets/chat/new-friend-icon.svg";
import {ElMessage} from "element-plus";
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";
import {getHistoryMessages, getUserFriends, getUserInit, getUsers, getEmojis} from "/@/api/imapi"
import EmptyData from "/@/components/common/emptyData.vue";
import ChatHistory from "/@/components/chat/ChatHistory.vue";
import ChatUserCard from "/@/components/chat/ChatUserCard.vue";
import ChatConfig from "/@/components/chat/ChatConfig.vue";
import ChatUserItem from "/@/components/chat/ChatUserItem.vue";
import ChatUserFriendItem from "/@/components/chat/ChatUserFriendItem.vue";
import ChatUserBaseInfo from "/@/components/chat/ChatUserBaseInfo.vue";
import ChatNewFriends from "/@/components/chat/ChatNewFriends.vue";
import {getFirstLetter} from "/@/utils/format";
import {Search} from '@element-plus/icons-vue'

interface UserData {
  avatar: Array<string>,
  createdAt: string,
  groupId: string,
  lastMsg: string,
  name: string,
  online: boolean,
  selected: boolean,
  updatedAt: string,
  hasNew: boolean,
  messages: Array<MessageData>,
}

interface MessageData {
  content: string,
  groupId: string,
  messageType: string,
  msgId: string,
  time: string,
  uid: string,
}

const defaultFrameStyle = {
  width: '60vw',
  height: '70vh',
  right: "20px",
  bottom: "20px",
}
const maxFrameStyle = {
  width: '100vw',
  height: '100vh',
  right: "0",
  bottom: "0",
}
export default defineComponent({
  name: 'ChatMainFrame',
  components: {
    ChatConfig,
    ChatUserCard,
    ChatHistory,
    EmptyData,
    ChatMsgItem,
    ChatGroupDetail,
    ChatUserItem,
    ChatUserFriendItem,
    ChatUserBaseInfo,
    ChatNewFriends
  },
  setup(props) {
    const autoKey = ref('6598764302890348');
    const chatHistoryRef = ref();
    const chatConfigRef = ref();
    const groupDetailRef = ref();
    const chatUserCardWrapRef = ref();
    const {proxy} = <any>getCurrentInstance();
    const stores = useUserInfo();
    const {userInfos} = storeToRefs(stores);
    const uid = '9CC786AE6BA4B3FD';
    // const uid = userInfos.value.hash;
    const users = ref<Array<UserData>>([]);
    const userMaps = ref({});
    const userFriendMap = ref({});
    const messages = ref([]);
    const state = reactive({
      logoIcon: import.meta.env.VITE_LOGO,
      msgLoading: true,
      loading: true,
      keywords: null,
      currentViewWidth: window.innerWidth,
      viewWidthLimit: 1400,
      emojis: [],
      message: '',
      groupInfoState: false,
      currentFrameState: 'mini',
      currentFrameLocked: true,
      frameStyle: defaultFrameStyle,
      showUserCardState: false,
      cardPosition: {
        top: '0px',
        left: '0px'
      },
      showConfig: false,
      showCardUser: {
        uid: '',
        groupId: ''
      },
      baseMenus: [],
      currentBaseMenu: 'normal'
    });
    const currentUser = ref<UserData>({});
    const currentFriend = ref({});
    const currentUserIndex = ref(0);
    const onlineState = ref(false);
    const showGroupInfo = () => {
      state.groupInfoState = !state.groupInfoState
    }
    const scrollToBottom = (divElement: any) => {
      divElement.scrollTop = divElement.scrollHeight;
    }
    onMounted(() => {
      if (state.currentViewWidth < state.viewWidthLimit) {
        state.frameStyle = maxFrameStyle
      }
      // proxy.mittBus.on('wsMessage', (data: any) => {
      //   switch (data.type) {
      //     case 'msg':
      //       const groupId = data.data.groupId
      //       users.value[getUserIndexByGroupId(groupId)].hasNew = true;
      //       users.value[getUserIndexByGroupId(groupId)].messages.push(data.data);
      //       nextTick(() => {
      //         scrollToBottom(document.getElementById('chat-msg-wrap'))
      //       });
      //       break;
      //     case 'state':
      //       onlineState.value = data.value;
      //       break;
      //     case 'pong':
      //       break;
      //   }
      // });
      nextTick(() => {
        scrollToBottom(document.getElementById('chat-msg-wrap'))
        document.getElementById("message-div")?.focus()
      });
      window.addEventListener('resize', handleResize);
      document.addEventListener('click', handleClickOutside);
    });
    onBeforeMount(() => {
      // users.value = [];
      // userMaps.value = {};
      // currentUser.value = {};
      // currentUserIndex.value = 0;
      getInit();
      getEmojiList();
    })
    onBeforeUnmount(() => {
      // 在组件卸载前，移除文档的点击事件监听器
      document.removeEventListener('click', handleClickOutside);
    });

    const getInit = () => {
      state.loading = true;
      getUserInit({uid: uid}).then(res => {
        const _data = res.data
        state.baseMenus = _data.menus;
        state.currentBaseMenu = _data.menus[0].value;
        getUserList();
        state.loading = false;
      })
    }
    const handleResize = () => {
      // 获取当前屏幕宽度并更新data属性
      state.currentViewWidth = window.innerWidth;
      if (state.currentViewWidth < state.viewWidthLimit) {
        state.currentFrameState = "max";
        state.frameStyle = maxFrameStyle
      } else {
        state.frameStyle = defaultFrameStyle
      }
    }
    const getUserList = () => {
      getUsers({uid: uid, type: state.currentBaseMenu == 'normal' ? 'normal' : 'client'}).then(res => {
        let _data = res.data;
        let _userMaps = {};
        for (const index in _data.list) {
          _data.list[index].hasNew = false;
          _data.list[index].selected = false;
          _data.list[index].messages = [];
          _userMaps[_data.list[index].groupId] = index;
        }
        users.value = Object.assign(_data.list);
        userMaps.value = Object.assign(_userMaps);
      })
    }
    const getHistoryMessageList = () => {
      state.msgLoading = true;
      const guid = currentUser.value.groupId;
      getHistoryMessages({uid: uid, groupId: guid}).then(res => {
        const _data = res.data;
        const _index = getUserIndexByGroupId(guid)
        const _messages = users.value[_index].messages;
        users.value[_index].messages = [..._data.list, ..._messages]
        nextTick(() => {
          scrollToBottom(document.getElementById('chat-msg-wrap'))
        });
        state.msgLoading = false;
      })
    }
    const getUserIndexByGroupId = (groupId: string): number => {
      return userMaps.value[groupId]
    }
    const getEmojiList = () => {
      getEmojis({}).then(res => {
        state.emojis = res.data
      })
    }
    const selectEmoji = (_emoji: any) => {
      state.message += _emoji
    }
    const sendMessage = () => {
      state.message = document.getElementById("message-div")?.innerText
      if (state.message.length == 0) {
        ElMessage.error("输入内容不能为空！");
      } else {
        const _data = {
          uid: uid,
          to: currentUser.value.groupId,
          messageType: 'text',
          content: state.message
        };
        proxy.mittBus.emit("wsSend", Object.assign({}, _data));
        nextTick(() => {
          state.message = "";
        });
      }
    }
    const selectUser = (_index: number) => {
      state.groupInfoState = false;
      users.value.forEach((item, index) => {
        item.selected = false;
        if (_index == index) {
          users.value[_index].hasNew = false;
          users.value[_index].messages = [];
          item.selected = true;
          currentUser.value = item;
          currentUserIndex.value = _index;
          getHistoryMessageList();
        }
      });
    }
    const handleMaxFrame = () => {
      if (state.currentViewWidth < state.viewWidthLimit) {
        if (state.currentFrameState == "max") {
          alert('x');
        } else {
          alert('y');
        }
      } else {
        state.currentFrameState = state.currentFrameState == "mini" ? 'max' : 'mini';
        state.frameStyle = state.currentFrameState == "max" ? maxFrameStyle : defaultFrameStyle
      }

    }
    const handleCloseFrame = async () => {
      state.currentFrameState = 'close';
      await stores.setChatMaxState(false)
      await stores.setChatMinState(true)
    }
    const handleLockFrame = async () => {
      state.currentFrameLocked = !state.currentFrameLocked
    }
    const handleChatHistory = () => {
      chatHistoryRef.value.openDialog();
      state.groupInfoState = false;
    }
    /// TODO
    const handleClickOutside = (event: any) => {
      // console.log('xxxxxxxxjjjjjjjjjjjj')
      // console.log(proxy.$refs)
      // console.log(event.target)
      // state.groupInfoState = !(state.groupInfoState && !proxy.$refs.groupDetailRef.contains(event.target))
    }
    const handleUserCard = (_data: any) => {
      state.cardPosition = {
        top: _data.event.clientY + 'px',
        left: _data.event.clientX + 'px'
      };
      state.showCardUser = {
        uid: _data.user.uid,
        groupId: _data.user.groupId || null
      }
      state.showUserCardState = true
      nextTick(() => {
        const targetDiv = document.getElementById('app');
        const divToMove = chatUserCardWrapRef.value;
        targetDiv.parentNode.insertBefore(divToMove, targetDiv.nextSibling);
      })
    };
    const handleBaseMenuChange = (_type: string) => {
      state.showConfig = false
      switch (_type) {
        case 'normal':
        case 'client':
          state.currentBaseMenu = _type;
          getUserList();
          break;
        case 'user':
          state.currentBaseMenu = _type;
          getUserFriendList();
          break;
        case 'document':
          state.currentBaseMenu = _type;
          getUserList();
          break;
        case 'config':
          state.showConfig = true
          break;
      }
    };

    const getUserFriendList = () => {
      getUserFriends({uid: uid, page: 1, pageSize: 200}).then(res => {
        const _list = res.data.list || []
        let _userMap = {};
        _list.forEach((item, index) => {
          let _f = getFirstLetter(item.nickname)
          if (!_userMap.hasOwnProperty(_f)) {
            _userMap[_f] = [];
          }
          _userMap[_f].push({
            avatar: item.avatar,
            uid: item.uid,
            nickname: item.nickname,
            selected: false
          });
        })

        // 获取排序后的键数组
        const sortedKeys = Object.keys(_userMap).sort();
        sortedKeys.unshift('好友申请');
        // 构建新对象
        const sortedObj: Record<string, any[]> = {};
        sortedKeys.forEach(key => {
          sortedObj[key] = key != '好友申请' ? _userMap[key] : [
            {
              uid: 'newFriend',
              avatar: NewFriendIcon,
              nickname: '好友申请',
              selected: false
            }
          ]
        });
        userFriendMap.value = sortedObj;
      })
    };

    const handleAdd = () => {
      if (state.currentBaseMenu == "normal" || state.currentBaseMenu == "client") {
        // 新增聊天
      }
      if (state.currentBaseMenu == "user") {
        // 查找用户
      }
    };

    const handleSelectFriendUser = (_user: any) => {
      currentFriend.value = _user;
      autoKey.value = new Date().getTime() + (Math.random() * 1000).toFixed(0);
    };
    return {
      Search,
      autoKey,
      chatConfigRef,
      chatHistoryRef,
      groupDetailRef,
      chatUserCardWrapRef,
      onlineState,
      currentUserIndex,
      currentUser,
      currentFriend,
      userFriendMap,
      FolderIcon,
      ImageIcon,
      ...toRefs(state),
      users,
      uid,
      messages,
      userInfos,
      MaxIcon,
      NormalIcon,
      LockIcon,
      UnlockIcon,
      CloseIcon,
      ConnectIcon,
      ConnectSelectedIcon,
      ConfigIcon,
      ConfigSelectedIcon,
      showGroupInfo,
      selectEmoji,
      sendMessage,
      selectUser,
      handleMaxFrame,
      handleCloseFrame,
      handleLockFrame,
      handleChatHistory,
      handleClickOutside,
      handleUserCard,
      handleBaseMenuChange,
      handleSelectFriendUser,
      handleAdd
    };
  },
});
</script>

<style scoped lang="scss">
.full-wrap {
  width: 100vw;
  height: 100vh;
  position: absolute;

  .mask {
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    position: absolute;
    z-index: 555;
  }

  $border-radius: var(--im-frame-border-radis);

  .main-wrap {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    width: 70vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: $border-radius;
    box-shadow: var(--el-box-shadow-dark);

    .header {
      width: 100%;
      height: 60px;
      background-color: #4b56ad;
      border-radius: $border-radius $border-radius 0 0;
      color: #ffffff;

      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      padding: 10px 20px;

      .logo-wrap {
        display: flex;
        align-items: center;

        .el-image {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
      }

      .act-btn {
        margin-left: 10px;
        width: 16px;
        cursor: pointer;
      }
    }

    .content {
      display: flex;
      align-items: flex-start;
      flex-direction: row;
      justify-content: flex-start;
      height: calc(100% - 60px);
      width: 100%;

      .left-menu {
        border-right: 1px solid #e4e4e4;
        height: 100%;
        width: 280px;
        background-color: #f5f5f5;
        border-radius: 0 0 0 $border-radius;
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        .base-menu {
          width: 80px;
          height: 100%;
          background-color: #2e2e2e;
          border-radius: 0 0 0 $border-radius;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          padding: 20px;


          .icon-image {
            width: 100%;
            text-align: center;
            margin-bottom: 20px;

            .el-image {
              width: 25px;
              height: 25px;
            }
          }

          .top {
            .avatar {
              margin-bottom: 20px;

              .el-image {
                border-radius: 6px;
              }
            }
          }

          .bottom {
          }
        }

        .user-wrap {
          height: 100%;
          width: calc(100% - 80px);
          overflow-x: hidden;
          overflow-y: auto;

          .search-wrap {
            height: 40px;
            border-bottom: 1px solid #e4e4e4;
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
            padding: 5px;

            span {
              display: inline-block;
              width: 30px;
              height: 30px;
              border: 1px solid #e4e4e4;
              border-radius: 4px;
              text-align: center;
              line-height: 30px;
              background-color: #ffffff;
              cursor: pointer;
            }
          }

          .user-wrap {
            width: 100%;
            height: calc(100% - 41px);
          }

        }
      }

      .chat-container {
        width: calc(100% - 280px);
        position: relative;
        background-color: #fafafa;
        border-radius: 0 0 $border-radius 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;

        .chat-head {
          padding: 5px 20px;
          height: 40px;
          border-bottom: 1px solid #e4e4e4;
          line-height: 30px;
          font-size: 16px;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: row;
          background-color: #f6f6f6;

          span {
            width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .msg-wrap {
          height: calc(100% - 170px);
          width: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          padding: 10px 0;
        }

        .send-wrap {
          border-radius: 0 0 12px 0;
          height: 129px;
          background-color: #ffffff;
          border-top: 1px solid #e4e4e4;

          .option-wrap {
            padding: 5px 10px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;

            .option-item {
              width: 20px;
              margin-right: 10px;
              cursor: pointer;
            }
          }

          .form-wrap {
            position: relative;

            .edit-wrap {
              height: 90px;
              width: 100%;
              padding: 0 10px 10px 10px;
              overflow-x: hidden;
              overflow-y: auto;
            }

            .send-btn {
              position: absolute;
              right: 20px;
              bottom: 20px;
              width: 80px;
              height: 30px;
              background-color: #1d3043;
              text-align: center;
              color: #EFEFEF;
              border-radius: 6px;
              line-height: 30px;
              cursor: pointer;
            }
          }

        }

        .group-info-wrap {
          position: absolute;
          right: 0;
          top: 39px;
          width: 260px;
          border-left: 1px solid #e4e4e4;
          border-top: 1px solid #e4e4e4;
          background-color: #ffffff;
          height: calc(100% - 40px);
          border-radius: 0 0 12px 0;
          overflow-x: hidden;
          overflow-y: auto;
          padding: 20px;
        }
      }

      .user-info-container {
        height: 100%;
        width: calc(100% - 280px);
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
      }
    }
  }
}

</style>
